<!-- Main Column -->
<div id="maincolumn">
<h2 class="main cpwd" id="main-title">New Product</h2>
<!-- Visual help : help tips and "Connected" label -->
  <!-- Create Poll address -->
	  <?=form_open(admin_url().'pr_product/page_insert_product', array('name' => 'newProduct','id' => 'newProduct'))?>
            <dl class="small"><!-- ODF Name -->
                <dt>
                    <label>Product Name</label>                                    
                </dt>
                <dd>
                   <?=form_input(array('name' 		=> 'pd_name',
                                      'id' 			=> 'pd_name',
                                      'class' 		=> 'inputtext w180 title'
                                      ))?>
                    
                </dd>
          	</dl>
          
          	  <dl class="small"><!-- ODF Core -->
                <dt>
                    <label>Price</label>                                    
                </dt>
                <dd id="odf">
                   <?=form_input(array('name' 		=> 'pd_price',
                                      'id' 			=> 'pd_price',
                                      'class' 		=> 'inputtext w180'
                                      ))?>
                    
                </dd>
              </dl>
              
              <dl class="small"><!-- ODF GPS Latitude -->
                <dt>
                    <label>Description</label>                                    
                </dt>
                <dd>
                   <?=form_input(array('name' 		=> 'pd_des',
                                      'id' 			=> 'pd_des',
                                      'class' 		=> 'inputtext w180'
                                      ))?>
                    
                </dd>
              </dl>
              
             <dl class="small"><!-- ODF GPS Latitude -->
                <dt>
                    <label>Image</label>                                    
                </dt>
                <dd>
                   <?=form_input(array('name' 		=> 'pd_image',
                                      'id' 			=> 'pd_image',
                                      'class' 		=> 'inputtext w180'
                                      ))?>
                    
                </dd>
          	 </dl>
          	 <!-- Picture  -->
            <div style="float:left; width:35%; text-align:center;">
                
                <dl class="small" style="margin-left:5px;">
                    <div id="view_picture" style="border:#CCC 1px solid; height:115px; padding:2px; width:115px; text-align:center; cursor:pointer;">
                    </div>
                </dl>
                <dl class="small">
                    <button onclick="getFile();" id="upload" type="button" class="button left" style="margin-left:4px;">Upload</button>
                    <button type="button" class="button no right delete_file" style="margin-right:6px;">Delete</button>
                    
                    <input id="userfile" name="userfile"  type="file" style="display:none;" />
                    <input type="hidden" name="picture" id="picture"/>
                    <label id="file_name">Please upload Poll picture!</label>
                </dl>
            </div>
            <!--button save and cancel -->
            <div class="buttons">	
                <input id="bSave1" type="button" class="button yes right mr40" value="<?= lang('pr_button_save') ?>" style="height:30px;width:50px;"/>
          		<input id="bCancel1" type="button" class="button no right" value=" <?= lang('pr_button_cancel') ?>" style="height:30px;width:50px;"/>      	
            </div>
      <?=form_close()?>
</div> <!-- /maincolumn -->

<script type="application/javascript">	
		
	/**
	 * Load window brows file
	 */
	function getFile(){
		 document.getElementById("userfile").click();
	}
	/**
	 * Upload file 
	 */
	(function () {
		var input = document.getElementById("userfile"), 
			formdata = false;
	
		if (window.FormData) {
			formdata = new FormData();
		}
		
		input.addEventListener("change", function (evt) {
			document.getElementById("file_name").innerHTML = "Uploading . . ."
			var i = 0, len = this.files.length, img, reader, file;
		
			for ( ; i < len; i++ ) {
				file = this.files[i];
		
					if ( window.FileReader ) {
						reader = new FileReader();
						reader.onloadend = function (e) { 
							showUploadedItem(e.target.result, file.fileName);
						};
						reader.readAsDataURL(file);
					}
					if (formdata) {
						formdata.append("userfile", file);
					}
			}
		
			if (formdata) {
				jQuery.ajax({
					url: admin_url + "pr_product/upload_file",
					type: "POST",
					data: formdata,
					processData: false,
					contentType: false,
					success: function (res) {
						document.getElementById("view_picture").innerHTML = '<img width="115px" height="115px" src="<?= base_url().'files/pictures/' ?>'+res+'" />';
						document.getElementById("file_name").innerHTML = res; 
						document.getElementById("picture").value = res; 
						
						formdata = new FormData();//clear the old file that remember
					}
				});
			}
		}, false);
	}());
	
	/**
	 * Clean attach file 
	 */
	$$('.delete_file').each(function(item)
	{
		item.addEvent('click', function(e)
		{
			ION.confirmation(
				'2',
				function()
				{
					new Request.HTML({
						url: admin_url + 'pr_product/delete_file',
						method: 'post',
						loadMethod: 'xhr',
						data: $('newProduct')// form id
					}).send();
					
					document.getElementById("view_picture").innerHTML = "Picture deleted from server";
					document.getElementById("file_name").innerHTML = "Pleas upload NOC picture!"; 
					document.getElementById("picture").value = ""; 
					document.getElementById("userfile").value = "";
				},
				'Are you sure?'
			);
			//alert(1);
		});
	});
	
	/**
	 *  Zoom Image
	 */
	$('view_picture').addEvent('click', function(event)
	{
		event.preventDefault();
		var id = document.getElementById('picture').value;
		new MUI.Modal({
			id: '',
			title: 'MUI',
			content: {url: admin_url + 'pr_product/view_picture/'+id+'/zoom'},
			type: 'modal2',
			width: 700,
			height: 500,
			padding: {top: 0, right: 0, bottom: 0, left: 0},
			scrollbars: false
		});
	});
	
	
</script>

